<template>
<div class="the-nav">
    <!-- 菜单折叠按钮 -->
    <!-- <div class="nav-handle-collapse">
    </div> -->
    <div class="nav-main">
        奉贤区行政事业单位办公用房信息化平台
    </div>
    <!-- 右侧操作区 -->
    <div class="nav-handle-box">
        <!-- <i class="iconfont icon-github-outline nav-icon nav-handle-item" @click="goToGithub()"></i> -->
        <!-- 消息按钮 -->
        <!-- 全屏按钮 -->
        <i class="nav-icon nav-handle-item el-icon-rank" @click="handleFullScreen()"></i>
        <!-- 用户名 -->
        <span class="nav-handle-item nav-user-name">{{user_name}}</span>
        <!-- 退出登录按钮 -->
        <i class="nav-icon nav-handle-item el-icon-switch-button" @click="logout()"></i>
    </div>
</div>
</template>

<script>
import store from "@/store";
import {
    mapActions
} from "vuex";
import {
    localDel,
    localGet
} from "@/util/storage";
export default {
    name: "theNav",
    data() {
        return {
            user_name: "", // 名称 // 用户信息
            full_screen: false // 是否全屏
        };
    },
    computed: {
        isCollapse() {
            return this.$store.getters.is_collapse;
        }
    },
    mounted() {
        this.user_name = localGet("username");
    },
    methods: {
        // 设置左侧菜单折叠状态
        setMenuCollapseStatus() {
            this.$store.dispatch("menu/setCollapseStatus", !this.isCollapse);
        },
        // 全屏操作
        handleFullScreen() {
            let element = document.documentElement;
            if (this.full_screen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
            this.full_screen = !this.full_screen;
        },
        goToGithub() {
            window.location.href = "https://github.com/hql7";
        },
        // 暂未开通，敬请期待
        notYetOpened() {
            this.$message("暂未开通，敬请期待");
        },
        logout() {
            this.setToken("");
            this.setKeepPage([], true);
            this.setCurrentPage("");
            localDel(this.GLOBAL.project_key);
            store.dispatch('menu/setUserMenuList', []);
            store.dispatch('menu/setUserMenu', []);

            this.$router.push("/login");
        },
        ...mapActions("app", ["setToken"]),
        ...mapActions("page", ["setKeepPage", "setCurrentPage"])
    }
};
</script>

<style lang="scss">
.the-nav {
    display: flex;
    justify-content: space-between;
    z-index: 1;
    height: $header-height;
    padding: $header-padding;
    line-height: $header-height - ($header-padding * 2);
    background: $header-background;
    color: $header-color;
    box-shadow: #c1c0c0 1px 4px 5px 2px;
    box-sizing: border-box;

    .nav-icon,
    .nav-user-name {
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
    }

    .nav-handle-item+.nav-handle-item {
        margin-left: 12px;
    }

    .nav-main {
        font-size: 18px;
        font-weight: 600;
    }
}
</style>
